<template>
  <div class="login">
    <div class="menu">
      <div class="el-icon-back" @click="toLogin"></div>
      <h1>欢迎注册</h1>
      <div class="form">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item label prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label prop="mobile">
            <el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label prop="password">
            <el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width: 100%;" plain @click="register('ruleForm')">立即注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
  
<script>
import { Register } from "@/utils/http";
export default {
  data() {
    return {
      ruleForm: {
        mobile: "",
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { min: 11, max: 11, message: "请输入正确的手机号", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 16, message: "长度在 6 到 16 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    register(formname) {
      this.$refs[formname].validate(valid => {
        if (valid) {
          Register(
            this.ruleForm.mobile,
            this.ruleForm.username,
            // this.ruleForm.password
            this.$crypto.encrypt(this.ruleForm.password)
          )
            .then(res => {
              if (res.data.code == 200) {
                this.$message({
                  message: "注册成功",
                  type: "success"
                });
                this.$router.push("/");
              } else {
                this.$message({
                  message: "注册失败",
                  type: "warning"
                });
              }
            })
            .catch(err => {
              this.$message.error(err.message);
            });
        } else {
          this.ruleForm = {};
          // this.$message({
          //   message: "请输入必填字段",
          //   type: "warning"
          // });
          return false;
        }
      });
    },
    /**返回登录页 */
    toLogin() {
      this.$router.push("/");
    }
  }
};
</script>
  
  <style lang="less" scoped>
.el-icon-back {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 40px;
  cursor: pointer;
}
.login {
  color: rgb(48, 78, 114);
  background-image: url(../../assets/static/image/bj.png);
  width: 100%;
  height: 100%;
  position: relative;
}

.menu {
  width: 450px;
  height: 500px;

  // border: 1px solid #000;
  // margin: 0 auto;
  position: absolute;
  top: 10%;
  right: 6%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  // background-color: rgb(246, 215, 109);
  border-radius: 6px;

  //  padding-left: ;
  > h1 {
    text-align: center;
    margin: 55px 0;
  }
}
.form {
  width: 350px;
  margin: 0 auto;
}

.form-btn {
  width: 100%;
  background-color: rgb(48, 78, 114);
  color: #fff;
  border: 0;
  height: 50px;
  font-size: 20px;
}

.login-img {
  display: flex;
  // margin-right: 16px;
}
</style>